<template>
  <p>App</p>
  <p>
    count: {{ $store.state.counter.count }}, count is
    {{ $store.getters["counter/oddOrEven"] }}
  </p>
  <button @click="$store.dispatch('counter/increment', 1)">+</button>
  <button @click="$store.commit('counter/DECREMENT', 1)">-</button>

  <p>
    count: {{ count }}, count is
    {{ oddOrEven }}
  </p>
  <button @click="increment(1)">+</button>
  <button @click="DECREMENT(1)">-</button>
</template>

<script lang="ts">
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState("counter", ["count"]),
    ...mapGetters("counter", ["oddOrEven"]),
  },
  methods: {
    ...mapActions("counter", ["increment"]),
    ...mapMutations("counter", ["DECREMENT"]),
  },
};
</script>
